<template>
  <el-container class="home">
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <img src="/vite.svg" alt="网站Logo" />
          <span class="logo-text">Vue3学习网站</span>
        </div>
        <div class="auth-buttons">
          <el-button type="primary" :icon="User" @click="handleLogin">登录</el-button>
          <el-button :icon="User" @click="handleRegister">注册</el-button>
        </div>
      </div>
    </el-header>
    
    <el-main>
      <el-row justify="center">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="hover" class="welcome-card">
            <template #header>
              <div class="card-header">
                <el-icon><Star /></el-icon>
                <h1>欢迎来到Vue3学习网站</h1>
              </div>
            </template>
            
            <div class="content">
              <div class="carousel-container">
                <el-carousel 
                  :interval="3000" 
                  :autoplay="currentPlayMode === 'auto'"
                  indicator-position="outside"
                  :initial-index="currentIndex"
                  @change="handleCarouselChange"
                  height="500px"
                  arrow="always"
                  trigger="click"
                  class="custom-carousel"
                >
                  <el-carousel-item v-for="(_, slideIndex) in Math.ceil(images.length / 3)" :key="slideIndex">
                    <div class="triple-image-container">
                      <div class="carousel-image-container" v-if="images[slideIndex * 3]">
                        <el-image 
                          :src="images[slideIndex * 3]" 
                          fit="contain"
                          :preview-src-list="images"
                          :initial-index="slideIndex * 3"
                          class="carousel-image"
                        >
                          <template #placeholder>
                            <div class="image-placeholder">
                              <el-icon><Picture /></el-icon>
                              <span>加载中...</span>
                            </div>
                          </template>
                          <template #error>
                            <div class="image-error">
                              <el-icon><PictureFilled /></el-icon>
                              <span>加载失败</span>
                            </div>
                          </template>
                        </el-image>
                      </div>
                      <div class="carousel-image-container" v-if="images[slideIndex * 3 + 1]">
                        <el-image 
                          :src="images[slideIndex * 3 + 1]" 
                          fit="contain"
                          :preview-src-list="images"
                          :initial-index="slideIndex * 3 + 1"
                          class="carousel-image"
                        >
                          <template #placeholder>
                            <div class="image-placeholder">
                              <el-icon><Picture /></el-icon>
                              <span>加载中...</span>
                            </div>
                          </template>
                          <template #error>
                            <div class="image-error">
                              <el-icon><PictureFilled /></el-icon>
                              <span>加载失败</span>
                            </div>
                          </template>
                        </el-image>
                      </div>
                      <div class="carousel-image-container" v-if="images[slideIndex * 3 + 2]">
                        <el-image 
                          :src="images[slideIndex * 3 + 2]" 
                          fit="contain"
                          :preview-src-list="images"
                          :initial-index="slideIndex * 3 + 2"
                          class="carousel-image"
                        >
                          <template #placeholder>
                            <div class="image-placeholder">
                              <el-icon><Picture /></el-icon>
                              <span>加载中...</span>
                            </div>
                          </template>
                          <template #error>
                            <div class="image-error">
                              <el-icon><PictureFilled /></el-icon>
                              <span>加载失败</span>
                            </div>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
                
                <div class="carousel-controls">
                  <el-radio-group v-model="currentPlayMode" size="large" @change="changePlayMode">
                    <el-radio-button v-for="mode in playModes" :key="mode.value" :value="mode.value">
                      <el-icon v-if="mode.value === 'manual'"><VideoPlay /></el-icon>
                      <el-icon v-else><VideoCamera /></el-icon>
                      {{ mode.label }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              
              <el-divider content-position="center">
                <el-tag type="info" effect="dark" round>网站介绍</el-tag>
              </el-divider>
              
              <el-row :gutter="20" class="feature-section">
                <el-col :xs="24" :sm="8" v-for="(feature, index) in features" :key="index">
                  <el-card shadow="hover" class="feature-card">
                    <template #header>
                      <div class="feature-header">
                        <el-icon :size="24" :color="feature.color"><component :is="feature.icon" /></el-icon>
                        <h3>{{ feature.title }}</h3>
                      </div>
                    </template>
                    <p>{{ feature.description }}</p>
                    <el-button type="primary" text>了解更多</el-button>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer class="footer">
      <div class="footer-content">
        <el-row justify="center" align="middle">
          <el-col :span="24">
            <p>© 2024 Vue3学习网站 版权所有</p>
            <p>ICP备案号：粤ICP备XXXXXXXX号</p>
            <p>联系我们：contact@example.com</p>
          </el-col>
        </el-row>
        <el-divider />
        <el-row justify="center" class="social-links">
          <el-col :xs="4" :sm="2" :md="1" v-for="(icon, index) in socialIcons" :key="index">
            <el-tooltip :content="icon.name" placement="top">
              <el-button circle :icon="icon.component" />
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, 
  Star, 
  VideoPlay, 
  VideoCamera, 
  Document, 
  Collection, 
  Connection,
  ChatDotRound,
  Share,
  Link,
  Promotion,
  Picture,
  PictureFilled
} from '@element-plus/icons-vue'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const images = [
      'https://quenbox.top/wp-content/uploads/2025/06/YASU3ECIT4_7.jpg',
      '/img/YOMA201817_0.jpeg',
      '/img/YOMA201817_1.jpeg',
      '/img/YOMA201817_2.jpeg',
      '/img/YOMA201817_3.jpeg',
      '/img/YOMA201817_4.jpeg',
      '/img/YOMA201817_5.jpeg',
      '/img/YOMA201817_6.jpeg',
      '/img/YOMA201817_7.jpeg',
      '/img/YOMA201817_8.jpeg',
      '/img/YOMA201817_9.jpeg',
      '/img/YOMA201817_10.jpeg',
      '/img/YOMA201817_11.jpeg',
      '/img/YOMA201817_12.jpeg'
    ]

    // 网站特点数据
    const features = [
      {
        title: '深入学习Vue3',
        description: '通过实际案例和详细教程，深入学习Vue3的新特性和Composition API',
        icon: 'Document',
        color: '#67C23A'
      },
      {
        title: '组件库展示',
        description: '探索Element Plus组件库的强大功能，以及如何在项目中高效使用',
        icon: 'Collection',
        color: '#409EFF'
      },
      {
        title: '实战项目',
        description: '参与实战项目开发，从零构建完整的Vue3应用，提升实际开发能力',
        icon: 'Connection',
        color: '#E6A23C'
      }
    ]

    // 社交媒体图标
    const socialIcons = [
      { name: '微信', component: ChatDotRound },
      { name: '微博', component: Share },
      { name: 'GitHub', component: Link },
      { name: '博客', component: Promotion }
    ]

    // 登录跳转函数
    const handleLogin = () => {
      router.push({
        path: '/lz/study/login',
        query: {
          from: 'home',
          timestamp: new Date().getTime()
        },
        hash: '#login-form'
      })
    }

    // 注册跳转函数
    const handleRegister = () => {
      router.push({
        path: '/lz/study/register',
        query: {
          from: 'home',
          timestamp: new Date().getTime()
        },
        hash: '#register-form'
      })
    }

    const currentIndex = ref(0)
    const currentPlayMode = ref('manual')
    const isPlaying = ref(false)
    let timer = null
    const interval = 3000 // 3秒间隔

    const playModes = [
      { label: '手动', value: 'manual' },
      { label: '自动', value: 'auto' }
    ]

    const handleCarouselChange = (index) => {
      currentIndex.value = index
    }

    const next = () => {
      currentIndex.value = (currentIndex.value + 1) % images.length
    }

    const prev = () => {
      currentIndex.value = (currentIndex.value - 1 + images.length) % images.length
    }
    
    const goTo = (index) => {
      currentIndex.value = index
    }

    const startAutoPlay = () => {
      stopAutoPlay()
      if (currentPlayMode.value === 'auto') {
        isPlaying.value = true
        timer = setInterval(next, interval)
      }
    }

    const stopAutoPlay = () => {
      isPlaying.value = false
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    }

    const pause = () => {
      if (currentPlayMode.value === 'auto' && isPlaying.value) {
        stopAutoPlay()
      }
    }

    const resume = () => {
      if (currentPlayMode.value === 'auto' && !isPlaying.value) {
        startAutoPlay()
      }
    }

    const changePlayMode = (mode) => {
      currentPlayMode.value = mode
      if (mode === 'auto') {
        startAutoPlay()
      } else {
        stopAutoPlay()
      }
    }

    onMounted(() => {
      changePlayMode('manual')
    })

    onUnmounted(() => {
      stopAutoPlay()
    })

    return {
      images,
      currentIndex,
      currentPlayMode,
      playModes,
      features,
      socialIcons,
      next,
      prev,
      goTo,
      changePlayMode,
      pause,
      resume,
      handleLogin,
      handleRegister,
      handleCarouselChange,
      // 图标
      User,
      Star,
      VideoPlay,
      VideoCamera,
      Picture,
      PictureFilled
    }
  }
}
</script>

<style scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #e8f5e9; /* 淡绿色背景 */
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.header-content {
  max-width: 1600px; /* 拓宽内容区域 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 40px;
  width: auto;
  transition: transform 0.3s;
}

.logo:hover img {
  transform: rotate(360deg);
}

.logo-text {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: bold;
  color: #409EFF;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.el-main {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.welcome-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 1600px; /* 拓宽卡片 */
  margin-left: auto;
  margin-right: auto;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.carousel-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.custom-carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dual-image-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.triple-image-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.carousel-image-container {
  height: 100%;
  width: 33.333%; /* 每个图片容器占1/3宽度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
  padding: 8px;
}

.carousel-image {
  height: 100%;
  width: 100%;
  object-fit: contain; /* 保持图片比例 */
}

.image-placeholder,
.image-error {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  background-color: #f5f7fa;
}

.image-placeholder .el-icon,
.image-error .el-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.carousel-controls {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.feature-section {
  margin-top: 20px;
}

.feature-card {
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-header h3 {
  margin: 0;
  color: #303133;
}

.footer {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ebeef5;
  flex-shrink: 0;
}

.footer-content {
  max-width: 1600px; /* 拓宽页脚内容 */
  margin: 0 auto;
  padding: 0 15px;
}

.footer-content p {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.social-links {
  margin-top: 10px;
}

/* 响应式布局调整 */
@media screen and (max-width: 768px) {
  .header {
    padding: 8px 15px;
  }
  
  .el-main {
    padding: 15px;
  }
  
  .content {
    gap: 15px;
  }
  
  .footer {
    padding: 15px;
  }
}

@media screen and (max-width: 480px) {
  .header {
    padding: 5px 10px;
  }
  
  .el-main {
    padding: 10px;
  }
  
  .content {
    gap: 10px;
  }
  
  .footer {
    padding: 10px;
  }
  
  .card-header h1 {
    font-size: 20px;
  }
}

/* 轮播图自定义样式 */
:deep(.el-carousel__arrow) {
  background-color: rgba(64, 158, 255, 0.7);
  font-size: 20px;
  width: 40px;
  height: 40px;
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(64, 158, 255, 0.9);
}

:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__indicator) {
  padding: 0 6px;
}

:deep(.el-carousel__indicator--horizontal .el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #409EFF;
}
</style>